自定义域名+七牛云搭建免费hexo博客


事先声明:本文并非广告软文,只是把自己建站的过程分享出来

前面写过一篇博客 Hexo + GitHub Pages 搭建你的个人博客,但这种方案有两个缺点:

  1. 域名是github.io的二级域名
  2. github在国内网速较慢

所以我最终还是选择了购买自己的域名,并借用七牛云搭建起了免费的博客站。

七牛云每个月有10G的免费流量,对于大多数博客站点来说足够使用了。

购买域名与云服务器

但想要使用自己的域名搭建博客,并非完全免费,前期还是要付出一点点的资金,主要付出的费用如下:

购买项目 说明 花费
域名 域名什么价位的都要,便宜的也有几块钱一年的,根据自己的需要买一个 10元以上
阿里云服务器 使用阿里云备案服务进行域名备案要求你必须购买三个月以上云服务器,我选了最便宜的服务器,学生的话可以享受9.9一个月的学生机 30元(学生)或160元左右

购买域名地址:https://wanwang.aliyun.com/

云服务器购买地址:https://www.aliyun.com/product/ecs

其他云厂商什么价位我不了解,我只试过阿里云的。

申请域名备案

在国内,申请备案是必须的。备案的流程很简单,登录阿里云控制台,右上角点击备案,然后按流程填表传资料即可。阿里云会进行初审,通过之后会将你的资料发给工信部进行审核。整个流程都很简单,也会有提示,一步步走就可以了

也可以手机下载阿里云app操作

申请七牛云

七牛云账号可以免费申请,登录之后添加对象存储服务,并创建两个空间,一个用于存放图片,一个用于存放博客站点静态文件。只创建一个空间其实也可以,但我个人比较建议分开管理,到时候可以给两个空间分别设置一个二级域名

创建好空间之后,七牛云会给你临时CDN域名用于测试

自动上传图片

typora设置

我使用typora来编写博客,typora支持使用图床工具自动上传图片到七牛云或其他云存储服务

打开typora设置,选择图像,进行如下设置:

图床工具设置

下载并安装upic,这是完全免费的图床工具:uPic: 简洁的 Mac 图床客户端 uPic (gitee.com)

打开upic设置,点击左下角+号,增加七牛云KODO,然后进行如下图设置:

图中的access key,secret key从七牛云后台获取:

记得将七牛云设置为默认图床

进行以上设置之后,在typora直接黏贴图片就能自动上传到七牛云了

注意:域名通过之后,记得将图床设置以及博文中的七牛云临时域名替换成你的域名

部署hexo到七牛云

qshell上传工具

这里借助了七牛云的命令行工具qshell,下载地址:命令行工具(qshell)_实用工具_对象存储 - 七牛开发者中心 (qiniu.com)

下载下来就是qshell二进制文件(mac和linux),执行:

mv qshell /usr/local/bin
chmod +x /usr/local/bin/qshell

在你的博客根目录创建upload.conf,内容如下:

{
    "src_dir": "/Users/xxx/blog/public",
    "bucket": "blog",
    "overwrite": true,
    "rescan_local": true
}
参数 说明
src_dir 要上传的目录,要指定到博客的public目录
bucket 博客存放的bucket
overwrite 覆盖重复文件
rescan_local 本地新增的文件不会被同步,需要手动设置为true才会去检测新增文件

更多参数参考:qshell/qupload.md at master · qiniu/qshell (github.com)

注意:要使用qshell上传文件到七牛云,需要先配置秘钥,参考:https://developer.qiniu.com/kodo/1302/qshell#4

部署上传

全量上传:

qshell qupload upload.conf

上传成功后,在upload.conf增加skip_path_prefixes

{
    "src_dir": "/Users/xxx/blog/public",
    "skip_path_prefixes": "medias,css,js,libs",
    "bucket": "blog",
    "overwrite": true,
    "rescan_local": true
}

作用是忽略medias,css,js,libs目录不进行上传,因为这些静态文件大多数情况是不需要每次都上传的,有修改的时候再把这行去掉就好了。

最后,修改博客根目录下的package.json:

"scripts": {
    "deploy": "hexo generate && qshell qupload upload.conf"
}

以后部署hexo到七牛云只需执行:

yarn deploy
# 或
npm deploy

最后

域名备案申请通过之后,在七牛云后台为你的空间设置自定义域名:

记得开启默认首页:

然后将图床设置以及博文中图片的七牛云临时域名替换成你的域名

然后就能根据你的自定义域名访问你的个人博客站点了😙

文章作者: 周君
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 周君 !
评论